<template>
  <div class="L_one">
    <div>
      <div>
        <div>5个</div>
        <div></div>
        <div>分站数量</div>
      </div>
      <div>
        <div>5个</div>
        <div></div>
        <div>传感器正常数量</div>
      </div>
      <div>
        <div>5个</div>
        <div></div>
        <div>传感器异常数量</div>
      </div>
    </div>

    <!-- 2 -->
    <div>


      <div>
        <div>支架数量</div>
        <div>23个</div>
      </div>

      <div>
        <div>工作面长度</div>
        <div>1000米</div>
      </div>



      <div>
        <div>巷道长度</div>
        <div>1000米</div>
      </div>



      <div>
        <div>机头坐标</div>
        <div>2022.00</div>
      </div>

      <div>
        <div>机尾坐标</div>
        <div>2022.00</div>
      </div>





    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  },
}
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.L_one {
  width: 100%;
  height: 100%;

  display: flex;
  flex-wrap: wrap;
  align-content: space-between;

  >div:nth-child(1) {
    width: 100%;
    height: 49.5%;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    >div:nth-child(1) {
      width: 25%;
      height: 100%;
      // border: 1px solid red;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      justify-content: center;

      >div:nth-child(1) {
        width: 100%;
        color: #007DFF;
        letter-spacing: 2px;
        font-weight: 900;
      }

      >div:nth-child(2) {
        width: 60px;
        height: 60px;
        // border: 1px solid red;
        background-image: url('../../../../assets/Scraper/底座元素25-2@1x (2).png');
        background-size: 100% 100%;
        background-repeat: no-repeat;


      }

      >div:nth-child(3) {
        color: #18CFEC;
        font-weight: 900;
        letter-spacing: 2px;
        font-size: 15px;
      }

    }

    >div:nth-child(2) {
      width: 29%;
      height: 100%;
      // border: 1px solid red;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      justify-content: center;

      >div:nth-child(1) {
        width: 100%;
        color: #48FFB2;
        font-weight: 900;
        letter-spacing: 2px;

      }

      >div:nth-child(2) {
        width: 60px;
        height: 60px;
        // border: 1px solid red;
        background-image: url('../../../../assets/Scraper/底座元素25-2@1x (2).png');
        background-size: 100% 100%;
        background-repeat: no-repeat;


      }

      >div:nth-child(3) {
        color: #18CFEC;
        font-weight: 900;
        letter-spacing: 2px;
        font-size: 15px;
      }

    }

    >div:nth-child(3) {
      width: 29%;
      height: 100%;
      // border: 1px solid red;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      justify-content: center;

      >div:nth-child(1) {
        width: 100%;
        color: #FA3C5E;
        font-weight: 900;
        letter-spacing: 2px;

      }

      >div:nth-child(2) {
        width: 60px;
        height: 60px;
        // border: 1px solid red;
        background-image: url('../../../../assets/Scraper/底座元素25-2@1x (1).png');
        background-size: 100% 100%;
        background-repeat: no-repeat;


      }

      >div:nth-child(3) {
        color: #FA3C5E;
        font-weight: 900;
        letter-spacing: 2px;
        font-size: 15px;
      }

    }
  }

  >div:nth-child(2) {
    width: 100%;
    height: 49.5%;
    // border: 1px solid red;
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 33%;
      height: 50%;
      // border: 1px solid red;
      display: flex;
      align-items: center;


      >div:nth-child(1) {
        width: 65%;
        height: 70%;
        // border: 1px solid red;
        background-image: url('../../../../assets/Scraper/radius.png');
        background-size: 100% 120%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #63F5E1;
        font-family: Microsoft YaHei;
        font-size: 0.7vw;
      }

      >div:nth-child(2) {
        color: #FFFFFF;
        border-bottom: 1px solid #63F5E1;
        // text-decoration: underline;
      }
    }
  }
}
</style>
